<template>
  <div class="module">
    <MTitle ref="title" icon="gjtj" @search="initData"></MTitle>
    <MBox>
      <MTabs class="m-tabs" :list="list" :activeIndex="activeIndex" @change="tabChange"></MTabs>
      <div class="content-box">
        <div class="animate">
          <div class="num">100</div>
        </div>
        <div class="outside">
          <div class="rotas" ref="rotas">
            <div class="item"
                 :class="{active:acriveItemIndex === index}"
                 :style="{ transform: `scale(${scaleArr[index]}) rotateY(-${360/allData.length*index}deg) translateZ(200px)`}"
                 v-for="(item,index) in allData" :key="index">
              <div class="box">
                <span class="count">{{ item.count }}</span>
                <img class="img" :src="require(`./images/${index+1}.png`)" alt="">
                <span class="name">{{ item.name }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </MBox>
  </div>
</template>
<script>
import MTitle from '../base-com/m-title/m-title'
import MBox from '../base-com/m-box/m-box'
import MTabs from '../base-com/m-tabs/m-tabs'

import { warningStatistics } from '@/api/warnings'
import { shipMixin } from '../../mixins/mixin'

export default {
  mixins: [shipMixin],
  components: {
    MTitle,
    MBox,
    MTabs
  },
  data() {
    return {
      activeIndex: 0,
      currentIndex: 0,
      speed: 2000,
      rotateNum: 0,
      t: null,
      list: [
        {
          name: '告警类型',
          value: 'type',
        },
      ],
      allData: []
    }
  },
  computed: {
    acriveItemIndex() {
      let num = this.allData.length - this.currentIndex
      num = num >= this.allData.length ? 0 : num
      return num
    },
    scaleArr() {
      const step = 0.1
      const arr = []
      if (this.allData.length > 0) {
        const acriveItemIndex = this.acriveItemIndex
        console.log(this.acriveItemIndex)
        for (let i = 0; i < this.allData.length; i++) {
          arr[i] = 1 - this.allData.length / 2 * step
          arr[i] = 1
        }


        // arr[acriveItemIndex] = 1
        // // 执行半数次数
        // for (let i = 1; i < parseInt(this.allData.length / 2); i++) {
        //   // 计算真实下标
        //   let realNum = acriveItemIndex - i
        //   if (realNum < 0) {
        //     realNum = this.allData.length + realNum
        //   }
        //   arr[realNum] = 1 - i * step
        //
        //   // 计算真实下标
        //   let realNum2 = acriveItemIndex + i
        //   if (realNum2 >= this.allData.length) {
        //     realNum2 = realNum2 - this.allData.length
        //   }
        //   arr[realNum2] = 1 - i * step
        // }
      }
      return arr
    },
  },
  methods: {
    shipChange() {
      this.initData();
    },
    initData() {
      const searchData = this.$refs.title.getForm()
      searchData.shipId = this.shipId
      this.clearT()
      warningStatistics(searchData).then(res => {
        const result = res?.result?.type || []
        this.allData = result.slice(0, 6)
        console.log(this.allData)
        this.startT()
      })
    },
    clearT() {
      if (this.t) {
        clearInterval(this.t)
        this.t = null
      }
    },
    startT() {
      this.t = setInterval(this.startFun, this.speed)
    },
    startFun() {
      let index = this.currentIndex + 1
      this.$refs.rotas.style.transition = `all 0.6s linear`
      this.$refs.rotas.style.transform = `rotateX(-10deg) rotateY(-${360 / this.allData.length * index}deg)`
      this.currentIndex = index
      if (index >= this.allData.length) {
        this.currentIndex = 0
        this.$nextTick(() => {
          setTimeout(() => {
            this.$refs.rotas.style.transition = `all 0s linear`
            this.$refs.rotas.style.transform = `rotateX(-10deg) rotateY(-0deg)`
            this.currentIndex = 0
          }, 600)
        })
      }
    },
    tabChange(index) {
    },
    init() {

    }
  }
}
</script>


<style lang="scss" scoped>
.content-box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.animate {
  width: 402px;
  height: 88px;
  background: url("./images/bg.png") no-repeat center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  .num {
    color: #FFC425;
    font-size: 40px;
    line-height: 40px;
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translate(-50%, 0);
    display: none;
  }
}
.outside {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
}
.rotas {
  width: 64px;
  height: 100px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-10deg) rotateY(0deg);
  user-select: none;
}
.rotas > .item {
  transition: all 0.6s linear;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  .box {
    position: relative;
    text-align: center;
    > img {
      display: block;
      width: 64px;
      height: 76px;
      //position: absolute;
      //top: 0;
      //left: 0;
    }
    .count {
      color: #FFC425;
      font-weight: 600;
      display: block;
    }
    .name {
      color: #fff;
      font-size: 16px;
      display: block;
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translate(-50%, 0);
      word-break: keep-all;
      text-align: center;
    }
  }
}


</style>
